<!--
 * @Author: ljc
 * @Date: 2024-12-02 16:37:14
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-17 09:39:33
 * @Description: 分类管理抽屉表格
-->
<template>
  <div style="padding: 0 8px">
    <rk-grid ref="tableRef"
      :="tableAttrs">
      <template #toolbar_left>
        <!-- 新增行 -->
        <el-button plain
          size="small"
          type="primary"
          @click="handleAddRow('add')">新增行</el-button>
        <el-button plain
          size="small"
          type="danger"
          @click="handleDelRow('del')">删除行</el-button>
      </template>
      <template #field_input="{ row, column }">
        <vxe-input style="width: 100%"
          v-model="row[column.field]"></vxe-input>
      </template>
      <template #default_input="{ row, column }">
        <vxe-input style="width: 100%"
          v-model="row[column.field]"></vxe-input>
      </template>
      <template #kind_select="{ row, column }">
        <el-select style="width: 100%"
          v-model="row[column.field]">
          <el-option v-for="item in PARAMS_STATUS"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </template>
      <template #param_render="{row, column}">
        <el-icon @click="codeEditorOpen({row, column})"
          size="18px"
          class="el-input__icon">
          <Edit />
        </el-icon>
      </template>
    </rk-grid>
    <CodeStudioDialog ref="codeDialogRef"
      v-bind="codeAttrs"
      @confirm="handleConfirm" />
  </div>
</template>

<script setup>
import { ref, reactive, } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { useParamHandle } from '@/components/homepage/editors/input-dbsource/hooks/UseParamHooks.js'
import CodeStudioDialog from '@hp/comps/dialog/src/CodeStudioDialog.vue'

const props = defineProps({
  schema: { type: Object },
  dataSource: { type: Object }
})
// 参数编辑
const codeEditorStore = reactive({
  row: { paramRender: '' },
  column: { field: 'paramRender' }
})
// 参数编辑ref对象
const codeDialogRef = ref(null)
// 参数编辑配置
const codeAttrs = reactive({
  title: '参数编辑',
  height: '600px',
  readOnly: false,
  codeType: 'func',
  eventName: 'paramRender',
  showFooter: true,
  eventParams: ['params']
})
// 表格Ref对象
const tableRef = ref(null)
// 表格数据方法
const { tableData, tableColumns, handleGetParamTable, handleAddRow, handleDelRow, codeEditorOpen, handleConfirm } = useParamHandle({ props, tableRef, codeEditorStore, codeDialogRef })
// 表格配置
const tableAttrs = reactive({
  data: tableData.value,
  autoLoad: false,
  boxConfig: true,
  pagerConfig: false,
  editConfig: true,
  toolbarConfig: { enabled: true, refresh: false, zoom: false, },
  columns: tableColumns,
})
// 表格列配置
const PARAMS_STATUS = [
  { value: 0, label: '字符串', },
  { value: 1, label: '数字', },
]
/** 获取表格数据 */
const handleGetTable = () => {
  const tableData = handleGetParamTable()
  return tableData
}
// 对外暴露方法
defineExpose({
  handleGetTable
})
</script>
<style lang="scss" scoped>
.el-input__icon {
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}
</style>